/**
 * JS 动画 & 交互
 * 1) 页面载入完成后,所有动画元素设置 _animate_init
 * 2) 页面滚动到哪个屏幕,哪个屏幕播放动画 & 导航条、大纲的出现
 * 3) 导航条 双向定位 & 大纲定位
 * 4) 导航条滑动门特效
 *
 * 获取DOM元素:
 *      1)获得一个元素: document.querySelector(selector)
 *      2)获得所有元素: document.querySelectorAll(selector)
 *
 * 设置样式: element.setAttribute('class',cls)
 * 获取样式: element.getAttribute('class',cls)
 *
 * 新增样式: addCls(element,cla);
 * 删除样式: delCls(element,cla);
 *
 * 事件处理:
 *      1)窗口载入: window.onload = function(){}
 *      2)窗口滚动: window.onscroll = function(){}
 *      3)点击处理: elem.onclick = function(){}
 *
 * 获取滚动条高度: document.body.scrollTop
 */


getElem = function (selector) {return document.querySelector(selector);} //获取元素
getElem2 = function (element,selector) {return element.querySelector(selector);} //获取元素
getAllElem = function (selector) {return document.querySelectorAll(selector);}
getCls = function (element) {    return element.getAttribute('class');}// 获取元素样式
setCls = function (element, cls) {    return element.setAttribute('class', cls);}// 设置元素样式
//为元素添加样式
addCls = function (element, cls) {
    let baseCls = getCls(element);
    if (baseCls.indexOf(cls) === -1) {
        setCls(element, baseCls + ' ' + cls);
    }
}
//为元素删除样式
delCls = function (element, cls) {
    let baseCls = getCls(element);
    if (baseCls.indexOf(cls) !== -1) {
        setCls(element, baseCls.split(cls).join(' ').replace(/\s+/g, ' '));
    }
}
// 第一步 初始化样式  init
screens=['.screen-1','.screen-2','.screen-3','.screen-4','.screen-5'];
screenAnimateElements = {
    '.screen-1': ['.screen-1__heading', '.screen-1__phone', '.screen-1__shadow'],
    '.screen-2': ['.screen-2__heading', '.screen-2__subheading', '.screen-2__phone', '.screen-2__point_i_1', '.screen-2__point_i_2', '.screen-2__point_i_3'],
    '.screen-3': ['.screen-3__heading', '.screen-3__subheading', '.screen-3__phone', '.screen-3__features'],
    '.screen-4': ['.screen-4__heading', '.screen-4__subheading', '.screen-4__type__item_i_1', '.screen-4__type__item_i_2', '.screen-4__type__item_i_3', '.screen-4__type__item_i_4'],
    '.screen-5': ['.screen-5__heading', '.screen-5__subheading', '.screen-5__bg']
}
initCla='_animate_init';
doneCla='_animate_done';
// 设置屏内元素为初始状态  -->>  添加  类  -->> X屏元素  --> screenCls = .screen-1
switchScreenElementClass = function (flag) {
    // screenCls 对应某一屏的字符串;例如: '.screen-1': ['.screen-1__heading', '.screen-1__phone', '.screen-1__shadow'],
    for (let screenCls in screenAnimateElements) {
        if(flag){
            playScreenAnimateDone(screenCls);
        }else{
            playScreenAnimateInit(screenCls);
        }
    }
}
playScreenAnimateDone = function (screenCls){
    let screen = getElem(screenCls);//当前屏的元素
    let screenStrArr = screenAnimateElements[screenCls];// 当前屏的子元素对应的字符串数组; 例如:  ['.screen-1__heading', '.screen-1__phone', '.screen-1__shadow']
    for (let i = 0; i < screenStrArr.length; i++) {
        let childrenStr = screenStrArr[i];
        let childrenElement = getElem2(screen, childrenStr);
        let oldClassName = getCls(childrenElement);
        // 更新子元素的className  由xx_xx_animate_init 替换为: xx_animate_done
        setCls(childrenElement, oldClassName.replace(initCla, doneCla));
    }
}
playScreenAnimateInit = function (screenCls){
    let screen = getElem(screenCls);//当前屏的元素
    let screenStrArr = screenAnimateElements[screenCls];// 当前屏的子元素对应的字符串数组; 例如:  ['.screen-1__heading', '.screen-1__phone', '.screen-1__shadow']
    for (let i = 0; i < screenStrArr.length; i++) {
        let childrenStr = screenStrArr[i];
        let childrenElement = getElem2(screen, childrenStr);
        let oldClassName = getCls(childrenElement);
        // 更新子元素的className 为子元素添加类: xx_animate_init
        let newCla = oldClassName + ' ' + childrenStr.slice(1) + initCla;
        setCls(childrenElement, newCla);
    }
}


window.onload = function () {
    console.log('onload start')
    switchScreenElementClass(false);
    // switchScreenElementClass(false);
    console.log('onload end');
}

// 第二步 页面滚动到哪个屏幕,哪个屏幕播放动画 & 导航条、大纲的出现
navItems = getAllElem('.header__nav-item');
outLineItems = getAllElem('.outline__item');
switchNavItemsActive = function (idx) {
    for (let i = 0; i < navItems.length; i++) {
        delCls(navItems[i], 'header__nav-item_status_active');
    }
    addCls(navItems[idx], 'header__nav-item_status_active');//内容显示红色
    for (let i = 0; i < outLineItems.length; i++) {
        delCls(outLineItems[i], 'outline__item_status_active');
    }
    addCls(outLineItems[idx], 'outline__item_status_active');//内容显示红色
}
switchNavItemsActive(0);//使第一个nav 处于激活状态


window.onscroll = function () {
    let top =  document.documentElement.scrollTop;//获取元素距离窗口的滚动距离
    // Y轴滚动超过 80px 固定header
    if (top > 80) {
        addCls(getElem('.header'), 'header_status_back');
        addCls(getElem('.outline'), 'outline_status_in');
    } else {
        delCls(getElem('.header'), 'header_status_back');
        delCls(getElem('.outline'), 'outline_status_in');
        switchNavItemsActive(0);
    }
    if (top > 1) {
        playScreenAnimateDone('.screen-1');
    }
    if (top > 1 * 800) {
        playScreenAnimateDone('.screen-2');
        switchNavItemsActive(1)
    }
    if (top > 2 * 800) {
        playScreenAnimateDone('.screen-3');
        switchNavItemsActive(2)
    }
    if (top > 3 * 800) {
        playScreenAnimateDone('.screen-4')
        switchNavItemsActive(3)
    }
    if (top > 4 * 800) {
        playScreenAnimateDone('.screen-5')
        switchNavItemsActive(4)
    }
}

// 第三步  导航条 双向定位 & 大纲定位
for (let i = 0; i < outLineItems.length; i++) {
    let item = outLineItems[i];
    item.onclick = function () {
        document.documentElement.scrollTop = i * 800;
    }
}

// 第四步  导航条滑动门特效
navTip = getElem('.header__nav-tip');
// i , navItems[]
setTip = function (idx, lib) {
    lib[idx].onmouseover = function () {
        // console.log(this, idx);
        navTip.style.left = (idx * 70) + 'px';
    }

    let activeIdx = 0;
    lib[idx].onmouseout = function () {
        console.log(this, idx);
        for (let i = 0; i < i < lib.length; i++) {
            if (getCls(lib[i]).indexOf('header__nav-item_status_active') > -1) {
                activeIdx = i;
                break;
            }
        }
        navTip.style.left = (idx * 70) + 'px';
    }
}
for (let i = 0; i < navItems.length; i++) {
    setTip(i, navItems);
}
